<template>
  <div v-loading="pageLoading" element-loading-text="数据正在读取中，请稍候！" element-loading-spinner="el-icon-loading" class="analysis-container">
    <el-form :inline="true" class="search-box">
      <!-- <el-form-item label="单米选取">
        <el-input v-model="q.user" placeholder="单米选取" @keyup.enter.native="load" />
      </el-form-item> -->
      <el-form-item label="单米选取">
        <el-select v-model="q.meterVal" placeholder="单米选取">
          <el-option v-for="item in deepList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 80px;" :disabled="!q.meterVal" @click="getSingleData">确定</el-button>
        <!-- <el-button type="default" icon="el-icon-refresh" @click="resetSearch">重置</el-button> -->
      </el-form-item>
    </el-form>
    <div class="main-box">
      <div class="main-right">
        <div class="right-form">
          <div class="r-flex">
            <div class="r-l">
              <el-form ref="form01" :model="form01" :rules="form01Rules" class="mo-box">
                <div class="mo-btn">
                  <el-button type="primary" style="width: 100%; height: 70px" @click="formSubmit(1)">图像裁剪</el-button>
                </div>
                <div class="mo-form">
                  <table>
                    <tr>
                      <td>
                        <el-form-item prop="leftX">
                          <el-input-number v-model="form01.leftX" placeholder="左上X" controls-position="right"></el-input-number>
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item prop="leftY">
                          <el-input-number v-model="form01.leftY" placeholder="左上Y" controls-position="right"></el-input-number>
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <el-form-item prop="rightX">
                          <el-input-number v-model="form01.rightX" placeholder="右下X" controls-position="right"></el-input-number>
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item prop="rightY">
                          <el-input-number v-model="form01.rightY" placeholder="右下Y" controls-position="right"></el-input-number>
                        </el-form-item>
                      </td>
                    </tr>
                  </table>
                </div>
              </el-form>
              <el-form ref="form02" :model="form02" :rules="form02Rules" class="mo-box">
                <div class="mo-btn">
                  <el-button type="primary" style="width: 100%;" @click="formSubmit(2)">去噪声处理</el-button>
                </div>
                <div class="mo-form">
                  <el-form-item prop="filterType">
                    <el-select v-model="form02.filterType" placeholder="请选择滤波类型" style="width: 100%;">
                      <el-option label="高斯滤波" :value="0" />
                      <el-option label="均值滤波" :value="1" />
                      <el-option label="中值滤波" :value="2" />
                      <el-option label="双边滤波" :value="3" />
                      <el-option label="方框滤波" :value="4" />
                      <el-option label="频域高通滤波" :value="5" />
                      <el-option label="频域低通滤波" :value="6" />
                    </el-select>
                  </el-form-item>
                </div>
              </el-form>
              <el-form ref="form03" :model="form03" :rules="form03Rules" class="mo-box">
                <div class="mo-btn">
                  <el-button type="primary" style="width: 100%;" @click="formSubmit(3)">二值化处理</el-button>
                </div>
                <div class="mo-form">
                  <el-form-item prop="threshold">
                    <el-input-number v-model="form03.threshold" placeholder="二值化阈值" controls-position="right" style="width: 100%;"></el-input-number>
                  </el-form-item>
                </div>
              </el-form>
              <el-form ref="form04" :model="form04" :rules="form04Rules" class="mo-box">
                <div class="mo-btn">
                  <el-button type="primary" style="width: 100%; height: 70px" @click="formSubmit(4)">生成连通图</el-button>
                </div>
                <div class="mo-form">
                  <table>
                    <tr>
                      <td>
                        <el-form-item prop="connectedType">
                          <el-select v-model="form04.connectedType" placeholder="连通类型" style="width: 90px;">
                            <el-option label="膨胀连通" :value="1" />
                            <el-option label="最近邻连通" :value="2" />
                          </el-select>
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item prop="maxArea">
                          <el-input-number v-model="form04.maxArea" placeholder="最大面积" controls-position="right"></el-input-number>
                        </el-form-item>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <el-form-item prop="minArea">
                          <el-input-number v-model="form04.minArea" placeholder="最小面积" controls-position="right"></el-input-number>
                        </el-form-item>
                      </td>
                      <td>
                        <el-form-item prop="maxDistance">
                          <el-input-number v-model="form04.maxDistance" placeholder="最大距离" controls-position="right"></el-input-number>
                        </el-form-item>
                      </td>
                    </tr>
                  </table>
                </div>
              </el-form>
            </div>
            <el-form ref="form06" :model="form06" class="r-r">
              <el-button type="primary" style="width: 100%;" @click="formSubmit(6)">自动处理</el-button>
            </el-form>
          </div>
          <el-form ref="form05" :model="form05" class="rb-box">
            <el-button type="danger" style="width: 100%;" @click="formSubmit(5)">人工智能算法识别</el-button>
          </el-form>
          <el-form ref="form06" :model="form06"></el-form>
          <el-form ref="form07" :model="form07"></el-form>
        </div>
        <div class="result-box">
          <div class="result-item">
            <div class="title">X-Y切片</div>
            <div class="body">
              <div ref="canvasXY" v-loading="loading1" class="body-inner">
                <div class="line-green" :style="{'top': heightXT}"><span>{{ xyDouble }}</span></div>
                <img id="canvasXY" :src="srcXY" :style="{'height': canvasXYHeight+'px'}" @click="canvasXYClick">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-body">
        <div class="main-body-flex">
          <!-- <span v-for="i in 10" :key="i" class="kedu" :style="{'top': i*10+'%'}"></span> -->
          <div class="scale-box">
            <div class="scale-tit">0m</div>
            <span v-for="i in 10" :key="i">{{ i/10 }}m</span>
          </div>
          <div class="result-box">
            <div class="result-item">
              <div class="title">X-Z切片</div>
              <div v-loading="loading2" class="body">
                <div class="line-green" :style="{'top': heightXZ}"><span>{{ xzDouble }}</span></div>
                <img id="canvasXZ" :src="srcXZ" @click="canvasXZClick">
              </div>
            </div>
            <div class="result-item">
              <div class="title">图像裁剪</div>
              <div v-loading="loadingN1" class="body">
                <img :src="srcCut">
              </div>
            </div>
            <div class="result-item">
              <div class="title">去噪声处理</div>
              <div v-loading="loadingN2" class="body">
                <img :src="srcFilter">
              </div>
            </div>
            <div class="result-item">
              <div class="title">二值化处理</div>
              <div v-loading="loadingN3" class="body">
                <img :src="srcThreshold">
              </div>
            </div>
            <div class="result-item">
              <div class="title">生成连通图</div>
              <div v-loading="loadingN4" class="body">
                <img :src="srcConnected">
              </div>
            </div>
            <div class="result-item">
              <div class="title">自动处理结果</div>
              <div v-loading="loadingN6" class="body">
                <img :src="srcAuto">
              </div>
            </div>
            <div class="result-item">
              <div class="title">连通图裂缝统计</div>
              <div class="sub-tit">裂缝条数（{{ lttNum }}）</div>
              <div id="echarts2" v-loading="loadingN7" class="body">
              </div>
            </div>
            <div class="result-item">
              <div class="title">AI模型裂缝统计</div>
              <div class="sub-tit">裂缝条数（{{ aiNum }}）</div>
              <div id="echarts1" ref="scaleBody" v-loading="loadingN7" class="body">
              </div>
            </div>
            <div class="result-item">
              <div class="title">人工智能算法提取图</div>
              <div v-loading="loadingN5" class="body">
                <img :src="srcAi">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import G2 from '@antv/g2';
import { transImageSrc, transFissure } from '@/utils'
import { getCookieValue, setCookieValue } from '@/utils/utils'
import { getPageOneOp, getPageThreeOp } from "@/api/analysis";

let timer02;
export default {
  name: 'Identification',
  components: {
  },
  data() {
    return {
      pageLoading: false,
      loading: false,
      loading1: false,
      loading2: false,
      loadingN1: false,
      loadingN2: false,
      loadingN3: false,
      loadingN4: false,
      loadingN5: false,
      loadingN6: false,
      loadingN7: false,
      heightXZ: '50%',
      heightXT: '50%',
      scaleWidth: 0,
      scaleHeight: 0,
      canvasXYHeight: 0,
      isXZReady: false,
      isXYReady: false,
      chart1: null,
      chart2: null,
      filter: {
        wellNum: '1',
        topDepth: 4423,
        bottomDepth: 4424
      },
      form01: {
        leftX: undefined,
        leftY: undefined,
        rightX: undefined,
        rightY: undefined
      },
      form02: {
        filterType: undefined
      },
      form03: {
        threshold: undefined
      },
      form04: {
        connectedType: undefined,
        maxArea: undefined,
        minArea: undefined,
        maxDistance: undefined
      },
      form05: {},
      form06: {},
      form07: {},
      aiNum: 0,
      lttNum: 0,
      srcXY: '',
      srcXZ: '',
      srcCut: '',
      srcFilter: '',
      srcThreshold: '',
      srcConnected: '',
      srcAi: '',
      srcAuto: '',
      xzDouble: 0.5,
      xyDouble: 0.5,
      q: {
        meterVal: undefined
      },
      deepList: [],
      form01Rules: {
        leftX: [{ required: true, message: '请输入左上X值', trigger: 'blur' }],
        leftY: [{ required: true, message: '请输入左上Y值', trigger: 'blur' }],
        rightX: [{ required: true, message: '请输入右下X值', trigger: 'blur' }],
        rightY: [{ required: true, message: '请输入右下Y值', trigger: 'blur' }]
      },
      form02Rules: {
        filterType: [{ required: true, message: '请选择滤波类型', trigger: 'change' }]
      },
      form03Rules: {
        threshold: [{ required: true, message: '请输入二值化阈值', trigger: 'blur' }]
      },
      form04Rules: {
        connectedType: [{ required: true, message: '请选择连通类型', trigger: 'change' }],
        maxArea: [{ required: true, message: '请输入最大连通面积', trigger: 'blur' }],
        minArea: [{ required: true, message: '请输入最小连通面积', trigger: 'blur' }],
        maxDistance: [{ required: true, message: '请输入最大连通距离', trigger: 'blur' }]
      }
    }
  },
  computed: {
  },
  created() {
    this.getCookieVal();
  },
  beforeDestroy() {
    clearTimeout(timer02);
  },
  mounted() {
    this.$nextTick(() => {
      this.scaleWidth = this.$refs.scaleBody.offsetWidth;
      this.scaleHeight = this.$refs.scaleBody.offsetHeight;
      this.canvasXYHeight = this.$refs.canvasXY.offsetWidth;
      // this.initChart1();
    });
  },
  methods: {
    getCookieVal() {
      this.filter.topDepth = Number(getCookieValue('topDepth'));
      this.filter.bottomDepth = Number(getCookieValue('bottomDepth'));
      this.q.meterVal = Number(getCookieValue('meterVal'));
      if (this.filter.topDepth && this.filter.bottomDepth && this.q.meterVal) {
        const optList = [];
        const lowEnd = Math.floor(Number(this.filter.topDepth)); // 向下取整
        const highEnd = Math.floor(Number(this.filter.bottomDepth)); // 向上取整
        for (var i = lowEnd; i < highEnd; i++) {
          optList.push({
            label: `${i}米~${i + 1}米`,
            value: i
          });
        }
        this.deepList = optList;
        this.getSingleData();
      }
    },
    getSingleData() { // 更改当前操作对应的单个米数
      this.pageLoading = true;
      this.isXYReady = false;
      this.isXZReady = false;

      const q = {
        user: 'anyone',
        opType: 5,
        meter: [this.q.meterVal, this.q.meterVal + 1]
      }
      setCookieValue('meterVal', this.q.meterVal);
      console.log(q);
      getPageOneOp(q).then(res => {
        this.pageLoading = false;
        if (res && res.message) {
          this.searchSubmit(); // 已完成调用获取切片数据
        } else {
          // timer02 = setTimeout(() => {
          //   this.getSingleData(); // 未完成继续轮询
          // }, 3000);
          this.$confirm(res.description, '提示', {
            confirmButtonText: '重试',
            cancelButtonText: '关闭',
            type: 'warning'
          }).then(() => {
            this.getSingleData(); // 未完成继续轮询
          }).catch(() => { });
        }
      }).catch((error) => {
        console.log(error);
        this.pageLoading = false;
      });
    },
    searchSubmit() {
      this.heightXZ = '50%';
      this.heightXT = '50%';
      this.xzDouble = 0.5;
      this.xyDouble = 0.5;
      this.getList(1);
      this.getList(2);
    },
    getList(opType) {
      this['loading' + opType] = true;
      const q = {
        user: 'anyone',
        opType
      };
      if (opType === 1 || opType === 2) { // X-Y切片 和 X-Z切片
        q.Double = opType === 1 ? this.xzDouble : this.xyDouble;
      }
      // console.log(q);
      getPageOneOp(q).then(res => {
        if (res && res.message) {
          if (opType === 1) {
            this.isXYReady = true;
            this.srcXY = transImageSrc(res.pic); // X-Y切片
          } else if (opType === 2) {
            this.isXZReady = true;
            this.srcXZ = transImageSrc(res.pic); // X-Z切片
          }
          this['loading' + opType] = false;
        }
      }).catch((error) => {
        console.log(error);
        this['loading' + opType] = false;
      });
    },
    canvasXZClick(e) {
      if (this.isXZReady) {
        const canvasHeight = e.target.clientHeight;
        this.xzDouble = e.offsetY / canvasHeight;
        this.heightXZ = this.xzDouble * 100 + '%';
        this.getList(1);
      }
    },
    canvasXYClick(e) {
      if (this.isXYReady) {
        const canvasHeight = e.target.clientHeight;
        this.xyDouble = e.offsetY / canvasHeight;
        this.heightXT = this.xyDouble * 100 + '%';
        this.getList(2);
      }
    },
    formSubmit(opType, fissure) {
      this.$refs[`form0${opType}`].validate((valid) => {
        if (valid) {
          this['loadingN' + opType] = true;
          const q = {
            user: 'anyone',
            opType
          };
          if (opType === 1) {
            q.para = [this.form01.leftX, this.form01.leftY, this.form01.rightX, this.form01.rightY]
          } else if (opType === 2) {
            q.para = [this.form02.filterType]
          } else if (opType === 3) {
            q.para = [this.form03.threshold]
          } else if (opType === 4) {
            q.para = [this.form04.connectedType, this.form04.maxArea, this.form04.minArea, this.form04.maxDistance]
          } else if (opType === 7) {
            q.para = [fissure]
          }
          getPageThreeOp(q).then(res => {
            if (res && res.message) {
              if (opType === 1) {
                this.srcCut = transImageSrc(res.pic); // X-Z切片裁剪
              } else if (opType === 2) {
                this.srcFilter = transImageSrc(res.pic); // X-Z滤波图片
              } else if (opType === 3) {
                this.srcThreshold = transImageSrc(res.pic); // 二值化处理
              } else if (opType === 4) {
                this.srcConnected = transImageSrc(res.pic); // 生成连通图
                setTimeout(this.formSubmit(7, 1), 1000);
              } else if (opType === 5) {
                this.srcAi = transImageSrc(res.pic); // AI法找到裂缝
                this.formSubmit(7, 0);
              } else if (opType === 6) {
                this.srcAuto = transImageSrc(res.pic); // 自动处理
              } else if (opType === 7) {
                if (fissure) {
                  this.lttNum = res.data.crack_counter;
                } else {
                  this.aiNum = res.data.crack_counter;
                }
                this.initChart1(fissure + 1, transFissure(res.data));
              }
              this['loadingN' + opType] = false;
            }
          }).catch((error) => {
            console.log(error);
            this['loadingN' + opType] = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    initChart1(fissure, data) {
    // initChart1() {
    //   const fissure = 2;
    //   const data = [
    //     {
    //       '深度': 0.535,
    //       '开度': 1
    //     },
    //     {
    //       '深度': 0.335,
    //       '开度': 5
    //     }
    //   ];
      // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
      // Step 1: 创建 Chart 对象
      this['chart' + fissure] = new G2.Chart({
        container: 'echarts' + fissure,
        autoFit: true,
        width: this.scaleWidth,
        height: this.scaleHeight,
        padding: [0, 10, 0, 10]
      });
      this['chart' + fissure].source(data, {
        '深度': {
          min: 0, // 手动指定最小值
          max: 1 // 手动指定最大值
        }
      });
      this['chart' + fissure].axis('深度', {
        label: {
          offset: -5
        }
      });
      this['chart' + fissure].axis('开度', {
        label: {
          offset: -65
        }
      });
      this['chart' + fissure].coord().reflect('y').transpose();
      this['chart' + fissure].interval().position('深度*开度').size(1).color('#f00');
      this['chart' + fissure].render();
    }
  }
}
</script>

<style lang="scss" scoped>
.analysis-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 50px);
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.search-box {
  padding: 10px 10px 0;
  background-color: #fff;
  .el-form-item {
    margin-bottom: 10px;
  }
}
.main-box {
  flex: 1;
  margin-top: 10px;
  overflow: hidden;
  display: flex;
  .main-body {
    background-color: #fff;
    flex: 1;
    display: flex;
    padding: 10px;
    .main-body-flex {
      position: relative;
      display: flex;
      flex: 1;
    }
    .kedu {
      position: absolute;
      left: 0;
      right: 0;
      border: 1px dashed rgba(4, 255, 0, 0.3);
    }
  }
  .main-right {
    width: 366px;
    margin-right: 10px;
    // background-color: #fff;
    // padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    .result-box {
      margin-top: 10px;
      padding: 10px;
      background-color: #fff;
    }
  }
}
.scale-box {
  margin-top: 44px;
  position: relative;
  display: flex;
  flex-direction: column;
  border-left: 2px solid #000;
  line-height: 1;
  .scale-tit {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
    display: flex;
    align-items: flex-start;
    border-top: 1px solid #000;
    padding-left: 2px;
    padding-top: 2px;
    min-width: 29px;
  }
  span {
    flex: 1;
    display: flex;
    align-items: flex-end;
    font-size: 12px;
    border-bottom: 1px solid #000;
    padding-left: 2px;
    min-width: 29px;
  }
}
.result-box {
  display: flex;
  flex: 1;
  .result-item {
    position: relative;
    margin: 0 5px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .title {
      text-align: center;
      font-size: 14px;
      height: 44px;
      line-height: 20px;
      span {
        font-size: 12px;
      }
    }
    .sub-tit {
      position: absolute;
      top: 20px;
      right: 0;
      left: 0;
      z-index: 1;
      line-height: 2;
      background-color: rgba(0, 0, 0, 0.6);
      text-align: center;
      color: #fff;
      font-size: 12px;
    }
    .body {
      position: relative;
      flex: 1;
      overflow: hidden;
      .line-green {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 10;
        border-top: 1px solid #00fe03;
        span {
          position: absolute;
          left: 2px;
          top: 2px;
          color: #00fe03;
          font-size: 12px;
        }
      }
    }
    .body-inner {
      position: relative;
    }
    canvas {
      width: 100%;
      height: 100%;
      background-color: #efefef;
    }
    img {
      width: 100%;
      height: 100%;
      background-color: #efefef;
    }
  }
}
#echarts1 {
  background-color: #efefef;
}
#echarts2 {
  background-color: #efefef;
}
.r-flex {
  display: flex;
  .r-l {
  }
  .r-r {
    flex: 1;
    padding: 10px;
    background-color: #fff;
    ::v-deep {
      .el-button {
        padding: 8px;
        height: 100%;
        white-space: pre-wrap;
        line-height: 1.4;
      }
    }
  }
}
.right-form {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
      &.is-error {
        margin-bottom: 18px;
      }
    }
  }
  table {
    width: 100%;
    line-height: 1;
    tr {
      td {
        vertical-align: top;
        ::v-deep {
          .el-form-item::before,
          .el-form-item::after {
            display: none;
          }
          .el-form-item__content::before,
          .el-form-item__content::after {
            display: none;
          }
        }
      }
    }
  }
  .rb-box {
    margin-top: 10px;
    padding: 10px;
    background-color: #fff;
  }
  .mo-box {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    margin-right: 10px;
    & + .mo-box {
      margin-top: 10px;
    }
    .mo-form {
      flex: 1;
      ::v-deep {
        .el-input-number {
          width: 90px;
          .el-input-number__decrease,
          .el-input-number__increase {
            display: none;
          }
          .el-input__inner {
            padding-right: 15px;
            text-align: left;
          }
        }
      }
    }
    .mo-btn {
      width: 80px;
      height: 100%;
      margin-right: 10px;
      ::v-deep {
        .el-button {
          padding: 8px;
          height: 100%;
        }
      }
    }
  }
}
</style>
